<template name="components">
    <div class="opoi9">
        <view class="plu_swip">
            <swiper
                class="swiper"
                indicator-dots="true"
                autoplay="true"
                interval="5000"
                duration="500"
                indicator-active-color='#ffffff'
                indicator-color='rgba(255,255,255,.3)'
            >
                <swiper-item v-for="(item, index) in historylist" :key="index">
                    <view class="swiper-item">
                        <img class="item_imgs" :src="item.imageUrl" alt srcset />
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <view class="plu_center">
            <view class="plu_center_list"  v-for="(item, index) in list" :key="index">
                <view class="li_top">{{item.name}}</view>
                <view class="li_Body">
                    <view
                        class="li_ten"
                        @click="gourl(ite)"
                        v-for="(ite, inde) in item.children"
                        :key="inde"
                        :class="item.children.length==1?'li_ten_t':''"
                    >
                        <view class="li_ten_li">
                            <img class="li_img" :src="ite.url" />
                        </view>
                        <div class="li_size">{{ite.name}}</div>
                    </view>
                </view>
            </view>
        </view>
    </div>
</template>

<script>
export default {
    name: "components",
    data() {
        return {
            list: [
                {
                    name: "产检服务",
                    children: [
                        // {
                        //     name: "预约挂号",
                        //     url: "../../static/fw1.png",
                        // },
                        // {
                        //     name: "产检报到",
                        //     url: "../../static/fw2.png",
                        // },
                        {
                            name: "产检时间表",
                            url: "../../static/fw3.png",
                            service: "../service/schedule/list",
                        },
                    ],
                },
                {
                    name: "远程检测记录",
                    children: [
                        {
                            name: "胎监监护",
                            url: "../../static/fw4.png",
                            service: "../service/fetalMonitoring",
                        },
                        {
                            name: "胎心监护",
                            url: "../../static/fw5.png",
                            service: "../service/FHR",
                        },
                        {
                            name: "血糖",
                            url: "../../static/fw6.png",
                            service: "../service/bloodSugar",
                        },
                        {
                            name: "血压",
                            url: "../../static/fw7.png",
                            service: "../service/bloodPressure",
                        },
                        {
                            name: "数胎动",
                            url: "../../static/fw8.png",
                            service: "../service/keepScore",
                        },
                        {
                            name: "体重",
                            url: "../../static/fw9.png",
                            service: "../service/weight",
                        },
                    ],
                },
                // {
                //     name: "医院服务",
                //     children: [
                //         {
                //             name: "孕妇学校",
                //             url: "../../static/fw10.png",
                //         },
                //         {
                //             name: "医生服务",
                //             url: "../../static/fw11.png",
                //         },
                //         {
                //             name: "院内导航",
                //             url: "../../static/fw12.png",
                //         },
                //     ],
                // },
            ],
            historylist: [],
            StatusBar: this.StatusBar,
            CustomBar: this.CustomBar,
            cardCur: 0,
        };
    },
    mounted() {
        this.getonlod();
    },
    methods: {
        getonlod() {
            const data = {
                code: "homepage_banner",
            };
            // 【移动端】获取用户监测历史记录（胎监，胎心）
            var _this = this;

            _this.$ajaxs
                .get("/mobile/v1/columnContent/getEffectiveContentByCode", data)
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylist = res.content;
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
        toChild(e) {
            uni.navigateTo({
                url: e.currentTarget.dataset.url,
            });
        },
        cardSwiper(e) {
            this.cardCur = e.detail.current;
        },
        gourl(itm) {
            if (!itm.service)
                return uni.showToast({ title: "暂无页面", icon: "none" });
            uni.navigateTo({
                url: itm.service,
                animationType: "pop-in",
                animationDuration: 200,
            });
        },
    },
};
</script>

<style scoped lang="scss">
.opoi9 {
    background: #f8f8f8;
    padding-bottom: 140upx;
    .plu_swip {
        .swiper-item {
            width: 100%;
            height: 350upx;
        }
        .item_imgs {
            width: 100%;
            height: 350upx;
        }
    }
    .plu_center_list {
        margin: 20upx 20upx 0 20upx;
        box-shadow: 0px 0px 2px 0px rgba(203, 203, 203, 0.5);
        border-radius: 20upx;
        background: #fff;
        .li_top {
            height: 80upx;
            padding-left: 40upx;
            line-height: 80upx;
            color: #666;
            font-size: 28upx;
        }
        .li_Body {
            text-align: center;
            .li_ten + .li_ten {
                border-left: 1px solid #f1f1f1;
            }
            .li_ten:nth-of-type(4) {
                border-left: none;
            }
            .li_ten {
                padding: 25upx 0;
                border-top: 1px solid #f1f1f1;
                display: inline-block;
                width: 33%;
                text-align: center;
                .li_img {
                    width: 80upx;
                    height: 80upx;
                }
                .li_size {
                    font-size: 24upx;
                    font-weight: 500;
                    color: #333;
                    line-height: 34upx;
                }
            }
            .li_ten_t{
                width: 100%;
                text-align: left;
                .li_img {
                    margin-left: 90upx;
                }
                .li_size {
                   padding-left: 67upx;
                }
            }
        }
    }

    .swiper {
        height: 350upx;
    }
}
</style>
